<template>
  <div class="app-container" style="padding: 0;">
    <el-scrollbar style="height:100%" class="scrollbar-x">
      <div class="f-centerXY index-title">
        <span class="mask-title">梦时代后台管理中心</span>
      </div>
      <div class="header-menu-wrap">
        <header-menu />
      </div>
      <div class="app-container-cont index_dashboard" :style="{'--color':theme?'17,26,36':'255,255,255'}">
        <el-row :gutter="24" style="align-items:flex-start">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
            <el-carousel trigger="click" class="sm-carousel boxshadow">
              <el-carousel-item>
                <div class="index-box flex-col">
                  <div class="index-box-header">
                    <div class="title flex-box">
                      <span>房态统计</span>
                    </div>
                  </div>
                  <div class="index-box-body flex-box ">
                    <div class="chart-wrapper fttj">
                      <div class="total">
                        <b class="num">{{ roomState.totalRoom }}</b>
                        <div class="desc">总房间数</div>
                      </div>
                      <div class="fttj-item">
                        <div class="num">{{ roomState.emptyRoom }}</div>
                        <div class="desc">空房数</div>
                      </div>
                      <div class="fttj-item">
                        <div class="num">{{ roomState.checkingRoom }}</div>
                        <div class="desc">入住房数</div>
                      </div>
                      <div class="fttj-item">
                        <div class="num">{{ roomState.liveDirty + roomState.emptyDirty }}</div>
                        <div class="desc">脏房数</div>
                      </div>
                      <div class="fttj-item">
                        <div class="num">{{ roomState.repair }}</div>
                        <div class="desc">故障房数</div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
              <!--<el-carousel-item>-->
              <!--<div class="index-box">-->
              <!--<div class="index-box-header flex-row">-->
              <!--<div class="title flex-box"><span>客控设备</span></div>-->
              <!--&lt;!&ndash; <el-radio-group v-model="radio0" size="small" class="index-radio">-->
              <!--<el-radio-button label="today">日</el-radio-button>-->
              <!--<el-radio-button label="lastOneMonth">月</el-radio-button>-->
              <!--<el-radio-button label="lastOneYear">年</el-radio-button>-->
              <!--</el-radio-group> &ndash;&gt;-->
              <!--</div>-->
              <!--<div class="index-box-body">-->
              <!--<div class="total">总计<b>50</b></div>-->
              <!--<div class="chart-wrapper">-->
              <!--&lt;!&ndash; <line-chart :chart-data="rateDta" /> &ndash;&gt;-->
              <!--<bar-chart2 />-->
              <!--</div>-->
              <!--</div>-->
              <!--</div>-->
              <!--</el-carousel-item>-->
            </el-carousel>
          </el-col>
          <!-- left end -->
          <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="12">
            <el-carousel trigger="click" class="sm-carousel sdyq">
              <el-carousel-item class="flex-row ">
                <div class="flex-box sdyq-item flex-row">
                  <div class="img"><img src="./../../assets/images/index-icon01.png"></div>
                  <div class="content flex-col">
                    <div class="flex-box frist">
                      <div class="num">{{ energy.water }}<small>m³</small></div>
                      <div class="desc">水表总数</div>
                    </div>
                    <!--<div class="flex-box second">-->
                    <!--<div class="num">0<small>t</small></div>-->
                    <!--<div class="desc">实际峰值</div>-->
                    <!--</div>-->
                  </div>
                </div>
                <div class="flex-box sdyq-item flex-row">
                  <div class="img"><img src="./../../assets/images/index-icon02.png"></div>
                  <div class="content flex-col">
                    <div class="flex-box frist">
                      <div class="num">{{ energy.kwh }}<small>Kw.h</small></div>
                      <div class="desc">电能量</div>
                    </div>
                    <!--<div class="flex-box second">-->
                    <!--<div class="num">0<small>Kw.h</small></div>-->
                    <!--<div class="desc">实际峰值</div>-->
                    <!--</div>-->
                  </div>
                </div>
                <div class="flex-box sdyq-item flex-row">
                  <div class="img"><img src="./../../assets/images/index-icon03.png"></div>
                  <div class="content flex-col">
                    <div class="flex-box frist">
                      <div class="num">{{ energy.ranqi }}<small>m²</small></div>
                      <div class="desc">燃气能量</div>
                    </div>
                    <!--<div class="flex-box second">-->
                    <!--<div class="num">0<small>m²</small></div>-->
                    <!--<div class="desc">实际峰值</div>-->
                    <!--</div>-->
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <!-- center end -->
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
            <div class="sm-carousel boxshadow3">
              <div class="index-box">
                <div class="index-box-header flex-row">
                  <div class="title flex-box"><span>巡检工单设备类别统计</span></div>
                </div>
                <div class="index-box-body no-padding">
                  <div class="chart-wrapper">
                    <pictorial-bar :chart-data="xjchartData" />
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <!-- right end -->
          <!-- 第一行 end -->
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
            <el-carousel trigger="click" class="sm-carousel boxshadow">
              <el-carousel-item>
                <div class="index-box">
                  <div class="index-box-header flex-row">
                    <div class="title flex-box"><span>酒店营收统计</span></div>
                    <el-radio-group v-model="radio0" size="small" class="index-radio" @change="getDayRevenueInfo">
                      <el-radio-button label="today">日</el-radio-button>
                      <el-radio-button label="lastOneMonth">月</el-radio-button>
                      <el-radio-button label="lastOneYear">年</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="index-box-body no-padding">
                    <div class="chart-wrapper">
                      <pie-chart2 :chart-data="revenueData" />
                      <!-- <div class="pie-title">
                            <div class="pie-title-item"><span class="label">房费</span><span class="num">52.87%</span></div>
                            <div class="pie-title-item"><span class="label">商品</span><span class="num">52.87%</span></div>
                            <div class="pie-title-item"><span class="label">餐费</span><span class="num">52.87%</span></div>
                        </div> -->
                    </div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
            <el-carousel trigger="click" class="sm-carousel boxshadow2">
              <el-carousel-item>
                <div class="index-box flex-col">
                  <div class="index-box-header">
                    <div class="title flex-box">
                      <span>设备统计</span>
                    </div>
                  </div>
                  <div class="index-box-body flex-box no-padding">
                    <div class="chart-wrapper">
                      <bar-chart :data="sbyxtj" />
                    </div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
            <div class="sm-carousel boxshadow4">
              <div class="index-box">
                <div class="index-box-header flex-row">
                  <div class="title flex-box">报警工单</div>
                  <el-radio-group v-model="radio1" size="small" class="index-radio" @change="getAlarmworkCount">
                    <el-radio-button label="today">日</el-radio-button>
                    <el-radio-button label="lastOneMonth">月</el-radio-button>
                    <el-radio-button label="lastOneYear">年</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="index-box-body">
                  <div class="chart-wrapper">
                    <line-chart :chart-data="alarmData" />
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
            <div class="sm-carousel boxshadow2">
              <div class="index-box">
                <div class="index-box-header flex-row">
                  <div class="title flex-box"><span>运维工单状态统计</span></div>
                  <el-radio-group v-model="radio2" size="small" class="index-radio" @change="getYwworkCount">
                    <el-radio-button label="today">日</el-radio-button>
                    <el-radio-button label="lastOneMonth">月</el-radio-button>
                    <el-radio-button label="lastOneYear">年</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="index-box-body no-padding">
                  <div class="chart-wrapper yygg">
                    <bar2 :data="ywgd" />
                    <!-- <div class="yygd-item flex-row">
                          <div class="name">已完成</div>
                          <div class="flex-box"><el-progress :stroke-width="16" color="#25c374" :percentage="36.68"></el-progress></div>
                          <div class="num">36.68%</div>
                        </div>
                        <div class="yygd-item flex-row">
                          <div class="name">处置中</div>
                          <div class="flex-box"><el-progress :stroke-width="16" color="#288aef" :percentage="26.64"></el-progress></div>
                          <div class="num">26.64%</div>
                        </div>
                        <div class="yygd-item flex-row">
                          <div class="name">挂起</div>
                          <div class="flex-box"><el-progress :stroke-width="16" color="#ebbc39" :percentage="36.68"></el-progress></div>
                          <div class="num">36.68%</div>
                        </div> -->
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
            <el-carousel trigger="click" class="sm-carousel boxshadow">
              <el-carousel-item>
                <div class="index-box">
                  <div class="index-box-header flex-row">
                    <div class="title flex-box"><span>酒店入住率</span></div>
                    <el-radio-group v-model="radio3" size="small" class="index-radio" @change="getCheckinRateByDate">
                      <el-radio-button label="today">日</el-radio-button>
                      <el-radio-button label="lastOneMonth">月</el-radio-button>
                      <el-radio-button label="lastOneYear">年</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="index-box-body no-padding">
                    <div class="chart-wrapper">
                      <pie-chart2 :chart-data="energyData" />
                      <!-- <div class="pie-title">
                            <div class="pie-title-item"><span class="label">标间</span><span class="num">52.87%</span></div>
                            <div class="pie-title-item"><span class="label">套房</span><span class="num">52.87%</span></div>
                        </div> -->
                    </div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
            <div class="sm-carousel boxshadow3">
              <div class="index-box">
                <div class="index-box-header flex-row">
                  <div class="title flex-box"><span>人员分布统计</span></div>
                  <el-radio-group v-model="radio4" size="small" class="index-radio" @change="getRoomOrderCount">
                    <el-radio-button label="today">日</el-radio-button>
                    <el-radio-button label="lastOneMonth">月</el-radio-button>
                    <el-radio-button label="lastOneYear">年</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="index-box-body no-padding">
                  <div class="chart-wrapper">
                    <bar id="ryfbtj" :data="ryfbtj" />
                    <div class="flex-row fyfb">
                      <div class="flex-box fyfb-item">
                        <div class="num" />
                        <div class="name" />
                      </div>
                      <div class="flex-box fyfb-item">
                        <div class="num" />
                        <div class="name" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
            <div class="sm-carousel boxshadow2">
              <div class="index-box">
                <div class="index-box-header flex-row">
                  <div class="title flex-box"><span>访客统计</span></div>
                  <el-radio-group v-model="radio5" size="small" class="index-radio" @change="getVisitorCount">
                    <el-radio-button label="today">日</el-radio-button>
                    <el-radio-button label="lastOneMonth">月</el-radio-button>
                    <el-radio-button label="lastOneYear">年</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="index-box-body no-padding">
                  <div class="chart-wrapper">
                    <bar :data="fktj" />
                    <div class="flex-row fyfb">
                      <div class="flex-box fyfb-item">
                        <div class="num" />
                        <div class="name" />
                      </div>
                      <div class="flex-box fyfb-item">
                        <div class="num" />
                        <div class="name" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
            <el-carousel trigger="click" class="sm-carousel boxshadow2">
              <!--<el-carousel-item>-->
              <!--<div class="index-box">-->
              <!--<div class="index-box-header flex-row">-->
              <!--<div class="title flex-box">安防设备统计</div>-->
              <!--<el-radio-group v-model="radio6" size="small" class="index-radio">-->
              <!--<el-radio-button label="today">日</el-radio-button>-->
              <!--<el-radio-button label="lastOneMonth">月</el-radio-button>-->
              <!--<el-radio-button label="lastOneYear">年</el-radio-button>-->
              <!--</el-radio-group>-->
              <!--</div>-->
              <!--<div class="index-box-body no-padding">-->
              <!--<div class="total">安防设备总数<b>50</b></div>-->
              <!--<div class="chart-wrapper">-->
              <!--<bar-chart />-->
              <!--</div>-->
              <!--</div>-->
              <!--</div>-->
              <!--</el-carousel-item>-->
              <el-carousel-item>
                <div class="index-box">
                  <div class="index-box-header flex-row">
                    <div class="title flex-box"><span>维修工单服务时间统计</span></div>
                    <!--<el-radio-group v-model="radio7" size="small" class="index-radio" @change=''>-->
                    <!--<el-radio-button label="today">日</el-radio-button>-->
                    <!--<el-radio-button label="lastOneMonth">月</el-radio-button>-->
                    <!--<el-radio-button label="lastOneYear">年</el-radio-button>-->
                    <!--</el-radio-group>-->
                  </div>
                  <div class="index-box-body no-padding">
                    <div class="chart-wrapper">
                      <pie-chart2 :chart-data="gdData" />
                      <!-- <div class="pie-title">
                            <div class="pie-title-item"><span class="label">当天解决</span><span class="num">52.87%</span></div>
                            <div class="pie-title-item"><span class="label">两天以内解决</span><span class="num">52.87%</span></div>
                            <div class="pie-title-item"><span class="label">两天后解决</span><span class="num">52.87%</span></div>
                        </div> -->
                    </div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import echarts from 'echarts'
import PieChart from './components/PieChart'
import PieChart2 from './components/PieChart2'
import BarChart from './components/BarChart'
import BarChart2 from './components/BarChart2'
import LineChart from './components/LineChart'
import PictorialBar from './components/pictorialBar'
import Bar from './components/Bar'
import Bar2 from './components/Bar2'
// import Index from "@/api/index";
// import MUtil from "@/utils/mm";
// const _service= new Index();
// const _mm = new MUtil()

import HeaderMenu from '@/components/HeaderMenu'
const pieChartData = {
  frist: {
    name: '酒店营收',
    name2: '酒店总营收',
    total: 0,
    title: ['房费', '商品', '餐费'],
    list: [
      { value: 0, name: '房费' },
      { value: 0, name: '商品' },
      { value: 0, name: '餐费' }
    ]
  },
  seracd: {
    name: '酒店入住率',
    name2: '总入住',
    total: 0,
    title: ['标间', '套房'],
    list: [
      { value: 0, name: '标间' },
      { value: 0, name: '套房' }
    ]
  },
  thirh: {
    name: '报修工单服务时间统计',
    name2: '工单总量',
    total: 100,
    title: ['当天解决', '两天以内解决', '两天后解决'],
    list: [
      { value: 0, name: '当天解决' },
      { value: 0, name: '两天内解决' },
      { value: 0, name: '两天后解决' }
    ]
  }
}
const energydemo = {
  water: 0,
  kwh: 0,
  ranqi: 0
}
const lineChartData = {
  newVisitis: {
    xAxisData: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'],
    list: [{
      name: '酒店部',
      data: [100, 120, 161, 134, 105, 160, 165, 80, 60]
    }, {
      name: '安保部',
      data: [120, 82, 91, 154, 162, 140, 145, 120, 156, 110, 120, 82, 91, 154, 162, 140, 145, 120, 156, 110, 82, 91, 154, 105]
    }, {
      name: '工程部',
      data: [80, 60, 71, 120, 156, 110, 84, 100, 120, 161, 134, 105, 160, 120, 82, 91, 154, 162, 140, 145, 120, 156, 110, 156]
    }]
  },
  alarmData: {
    xAxisData: ['安防报警', '消防报警', '楼控报警', '其他报警'],
    list: [{
      name: '数量',
      data: [0, 0, 0, 0]
    }
      // ,{
      //   name:'安保部',
      //   data:[60, 50, 80, 71]
      // },{
      //   name:'工程部',
      //   data:[50, 40, 70, 60]
      // },{
      //   name:'后勤部',
      //   data:[40, 30, 60, 30]
      // }
    ]
  },
  rateDta: {
    xAxisData: ['房费', '餐费', '商品'],
    list: [{
      name: '酒店部',
      data: [30, 40, 95]
    }]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}
const barData = {
  frist: {
    'name': '入住人数',
    'num': 0
  },
  seracd: {
    'name': '访客人数',
    'num': 0
  }
}
const barlist = {
  frist: [{
    name: '已完成',
    value: 0
  }, {
    name: '进行中',
    value: 0
  }, {
    name: '终止',
    value: 0
  }
  ]
}

const sbyxtjdata = [0, 0, 0, 0]
const xjchartData1 = {
  'name': ['类1', '类2', '类3', '类4'],
  'num': [0, 0, 0, 0]
}

export default {
  name: 'Dashboard',
  components: {
    PieChart,
    PieChart2,
    BarChart,
    BarChart2,
    LineChart,
    PictorialBar,
    Bar,
    Bar2,
    HeaderMenu
  },
  data() {
    return {
      radio0: 'today',
      radio1: 'today',
      radio2: 'today',
      radio3: 'today',
      radio4: 'today',
      radio5: 'today',
      radio6: 'today',
      radio7: 'today',
      revenueData: pieChartData.frist,
      energyData: pieChartData.seracd,
      gdData: pieChartData.thirh,
      lineChartData: lineChartData.newVisitis,
      alarmData: lineChartData.alarmData,
      rateDta: lineChartData.rateDta,
      ryfbtj: barData.frist,
      fktj: barData.seracd,
      ywgd: barlist.frist,
      sbyxtj: sbyxtjdata,
      xjchartData: xjchartData1,
      energy: energydemo,
      roomState: {
        checkingRoom: 0,
        emptyDirty: 0,
        emptyRoom: 0,
        liveDirty: 0,
        repair: 0,
        totalRoom: 0
      }
    }
  },
  computed: {
    theme() {
      return this.$store.state.settings.theme
    }
  },
  created() {
    // this.getTotalRoomState()
    // this.getCheckinRateByDate()
    // this.getDayRevenueInfo()
    // this.getRoomOrderCount()
    // this.getVisitorCount()
    // this.getSbyxtj()
    // this.getAlarmworkCount()
    // this.getYwworkCount()
    // this.getFixworkCount()
    // this.getXjworkCount();
    // this.findEnergy();

  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },

    findEnergy() {
      var that = this
      that.loading = true
      // _service.findEnergy().then(res=>{
      //     that.loading=false
      //     if(res.code==0){
      //         that.energy.water = res.result;
      //     }
      // }).catch(()=>{
      //     that.loading=false
      // })
    },
    // 房态统计
    getTotalRoomState() {
      var that = this
      that.loading = true
      // _service.getTotalRoomState().then(res=>{
      //   that.loading=false
      //   if(res.code==0){
      //     that.roomState=res.result
      //   }
      // }).catch(()=>{
      //   that.loading=false
      // })
    },
    // 酒店营收统计radio0
    getDayRevenueInfo() {
      var that = this
      // data=_mm.getDate(this.radio0),
      var params = {
        StartDate: data.startTime + '00:00:00',
        EndDate: data.endTime + '23:59:59'
      }
      that.loading = true
      // _service.getDayRevenueInfo(params).then(res=>{
      //     that.loading=false
      //     // debugger
      //     if(res.code==0 && res.result){
      //       var data=that.revenueData
      //       that.revenueData={
      //         ...data,
      //         total:res.result.totalRevenue,
      //         list:[{ value: res.result.roomTotalAmount, name: '房费' },
      //           { value: res.result.goodsTotalAmount, name: '商品' },
      //           { value: res.result.foodTotalAmount, name: '餐费' }]
      //       }
      //     }else{
      //       that.revenueData=pieChartData.frist
      //     }
      // }).catch(()=>{
      //     that.loading=false
      //   })
    },
    // 酒店入住率radio3
    getCheckinRateByDate() {
      var that = this
      // data=_mm.getDate(this.radio3),
      var params = {
        StartDate: data.startTime + '00:00:00',
        EndDate: data.endTime + '23:59:59'
      }
      that.loading = true
      // _service.getCheckinRateByDate(params).then(res=>{
      //     that.loading=false
      //     if(res.code==0 && res.result && res.result.length>0){
      //       var total=res.result[0].totalNum,title=[],list=[],notinNum=res.result[0].totalNum;
      //       res.result&& res.result.map(item=>{
      //         notinNum=notinNum-item.checkinCnt
      //         title.push(item.RoomTypeTitle);
      //         list.push({value:item.checkinCnt,name:item.RoomTypeTitle});
      //       })
      //       title.push('未入住');
      //       list.push({value:notinNum,name:'未入住'})
      //       that.energyData={
      //         name:'酒店入住率',
      //         name2:'总入住',
      //         total,
      //         title,
      //         list
      //       }
      //     }else{
      //       that.energyData=pieChartData.seracd
      //     }
      // }).catch(()=>{
      //     that.loading=false
      //   })
    },
    // 总人数
    getRoomOrderCount() {
      var that = this
      // data=_mm.getDate(this.radio4),
      var params = {
        StartDate: data.startTime + '00:00:00',
        EndDate: data.endTime + '23:59:59'
      }
      that.loading = true
      // _service.getRoomOrderCount(params).then(res=>{
      //     that.loading=false
      //     if(res.code==0 && res.result && res.result.length>0) {
      //         that.ryfbtj.num = res.result
      //     }
      // }).catch(()=>{
      //     that.loading=false
      // })
    },

    getVisitorCount() {
      var that = this
      // data=_mm.getDate(this.radio5),
      var params = {
        StartDate: data.startTime + '00:00:00',
        EndDate: data.endTime + '23:59:59'
      }
      that.loading = true
      // _service.getVisitorCount(params).then(res=>{
      //     that.loading=false
      //     if(res.code==0 && res.result && res.result.length>0){
      //       that.fktj.num = res.result
      //     }
      // }).catch(()=>{
      //     that.loading=false
      // })
    },

    getSbyxtj() {
      // _service.getAssertsCount().then(res=>{
      //     if(res.code==0 && res.result && res.result.length>0) {
      //         let result = res.result
      //         this.sbyxtj = [result.af, result.xf, result.lk, result.qt]
      //     }
      // })

    },

    getAlarmworkCount() {
      var that = this
      // data = _mm.getDate(this.radio1),
      var params = {
        StartDate: data.startTime + '00:00:00',
        EndDate: data.endTime + '23:59:59'
      }
      that.loading = true
      // _service.getAlarmworkCount(params).then(res=>{
      //     that.loading=false
      //     if(res.code==0 && res.result && res.result.length>0) {
      //         let result = res.result
      //         if (result != null) {
      //             this.alarmData.list = [
      //                 {
      //                     name: '数量',
      //                     data: [result.af, result.xf, result.lk, result.qt]
      //                 }
      //             ]
      //         }
      //     }

      // })
    },

    getYwworkCount() {
      var that = this
      // data = _mm.getDate(this.radio2),
      var params = {
        StartDate: data.startTime + '00:00:00',
        EndDate: data.endTime + '23:59:59'
      }
      that.loading = true
      // _service.getYwworkCount(params).then(res=>{
      //     that.loading=false
      //     if(res.code==0 && res.result && res.result.length>0) {
      //         let result = res.result
      //         if (result != null) {
      //             let t = result.wc + result.jxz + result.zz

      //             this.ywgd = [{
      //                 name: '已完成',
      //                 value: Number(result.wc * 100 / t).toFixed(2)
      //             }, {
      //                 name: '进行中',
      //                 value: Number(result.jxz * 100 / t).toFixed(2)
      //             }, {
      //                 name: '终止',
      //                 value: Number(result.zz * 100 / t).toFixed(2)
      //             }]
      //         } else {
      //             this.ywgd = [{
      //                 name: '已完成',
      //                 value: 0
      //             }, {
      //                 name: '进行中',
      //                 value: 0
      //             }, {
      //                 name: '终止',
      //                 value: 0
      //             }]
      //         }
      //     }

      // })
    },

    getFixworkCount() {

      // _service.getFixworkCount().then(res=>{
      //     if(res.code==0 && res.result && res.result.length>0) {
      //         let result = res.result
      //         if (result != null) {
      //             this.gdData.list = [
      //                 {value: result.day1, name: '当天解决'},
      //                 {value: result.day2, name: '两天内解决'},
      //                 {value: result.day3, name: '两天后解决'},
      //             ]
      //         }
      //     }
      // })
    },
    getXjworkCount() {
      // _service.getXjworkCount().then(res=>{
      //     if(res.code==0 && res.result && res.result.length>0) {
      //         let result = res.result
      //         if (result != null) {
      //             let name = [], num = []
      //             for (let i = 0; i < result.length; i++) {
      //                 var r = result[i]
      //                 if (r.name != null && r.name != '') {
      //                     name.push(r.name)
      //                     num.push(r.value)
      //                 }
      //             }

      //             this.xjchartData = {
      //                 name: name,
      //                 num: num
      //             }

      //         }
      //     }
      // })
    }
  }
}
</script>
<style lang="scss">
@import '~styles/theme.scss';
// $color:var(--color);
$color: #111a24;
$colorAux: #54beff;
$text: #00f2ff;
$subtext: #b6e6ff;
.app-container-cont.index_dashboard {
  padding: 20px 20px 0;
}
.app-container {
  height: 100%;
  background: url('~images/index-bg@2x.png');
  .index-title {
    // background-image: url('/static/images/index-tit.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    width: 100%;
    height: 95px;
    position: fixed;
    left: 0;
    right: 0;
    top: 10px;
    .mask-title {
      display: inline-block;
      padding: 5px 0;
      width: 510px;
      background: rgba(3, 25, 49, 1);
      font-size: 40px;
      color: #fff;
    }
  }
  .header-menu-wrap {
    position: fixed;
    top: 17px;
    right: 0;
  }
  > .flex-row {
    align-items: flex-start;
  }
  .index-title {
    // width: 650px;
    height: 95px;
    // line-height: 95px;
    margin: 0 auto;
    font-size: 32px;
    text-align: center;
    color: #44e4ff;
    background: linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 20%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0) 100%);
    background: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 20%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 20%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0) 100%);
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 20%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0) 100%);
    background-image: url('~images/index-tit.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    position: relative;
    // &::before{
    //   content: '';
    //   position: absolute;
    //   left: 0;
    //   right: 0;
    //   top:0;
    //   height: 2px;
    //   background: linear-gradient(left, rgba(#44E4FF,0) 0%,  rgba(#44E4FF,.5) 20%, rgba(#44E4FF,.9) 50%, rgba(#44E4FF,.5) 80%,  rgba(#44E4FF,0) 100%);
    // }
    // &::after{
    //   content: '';
    //   position: absolute;
    //   left: 0;
    //   right: 0;
    //   bottom:0;
    //   height: 2px;
    //   background: linear-gradient(left, rgba(#44E4FF,0) 0%,  rgba(#44E4FF,.5) 20%, rgba(#44E4FF,.9) 50%, rgba(#44E4FF,.5) 80%,  rgba(#44E4FF,0) 100%);
    // }
  }
  .sm-carousel,
  .base-carousel {
    overflow: hidden;
    background-color: rgba($color, 0.6);
    border-radius: 8px;
    border-width: 1px solid transparent;
    padding: 1px;
    position: relative;
    &.boxshadow {
      box-shadow: inset 0px 0px 16px 0px rgba($colorAux, 0.4); /* 标准的必须写在最后 */
      background-image: linear-gradient(#0c1c34, #0c1c34), linear-gradient(to bottom right, rgba($colorAux, 1), rgba($colorAux, 0));
      background-clip: content-box, padding-box;
      transform: filter 0.5s ease;
    }
    &.boxshadow2 {
      box-shadow: inset 0px 0px 16px 0px rgba($colorAux, 0.4); /* 标准的必须写在最后 */
      background-image: linear-gradient(#0c1c34, #0c1c34), linear-gradient(to top left, rgba($colorAux, 1), rgba($colorAux, 0));
      background-clip: content-box, padding-box;
      transform: filter 0.5s ease;
    }
    &.boxshadow3 {
      box-shadow: inset 0px 0px 16px 0px rgba($colorAux, 0.4); /* 标准的必须写在最后 */
      background-image: linear-gradient(#0c1c34, #0c1c34), linear-gradient(to top right, rgba($colorAux, 1), rgba($colorAux, 0));
      background-clip: content-box, padding-box;
      transform: filter 0.5s ease;
    }
    &.boxshadow4 {
      box-shadow: inset 0px 0px 16px 0px rgba($colorAux, 0.4); /* 标准的必须写在最后 */
      background-image: linear-gradient(#0c1c34, #0c1c34), linear-gradient(to bottom left, rgba($colorAux, 1), rgba($colorAux, 0));
      background-clip: content-box, padding-box;
      transform: filter 0.5s ease;
    }
    &.sdyq {
      background-image: url('./../../assets/images/index-bg02.png');
      background-position: top center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-color: #0c1c34;
      .sdyq-item {
        padding-left: 40px;
        color: #fff;
        .img {
          width: 90px;
          margin-right: 16px;
          img {
            width: 100%;
          }
        }
        .content {
          height: 170px;
          justify-content: space-between;
          .num {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 8px;
            text-shadow: 0px 0px 30px #00f2ff;
            small {
              font-size: 18px;
              font-weight: 400;
            }
          }
          .desc {
            font-size: 16px;
            color: #b6e6ff;
          }
          .second .num {
            color: #00f2ff;
          }
        }
      }
    }
  }
  .sm-carousel {
    width: 100%;
    height: 300px;
    margin-bottom: 20px;
  }
  .index-box {
    overflow: hidden;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    color: $text;
    .index-box-header {
      padding: 0 20px;
      height: 50px;
      line-height: 50px;
      .title {
        font-size: 18px;
        span {
          position: relative;
          padding-right: 90px;
          background-image: url('./../../assets/images/index-icon04.png');
          background-repeat: no-repeat;
          background-position: right center;
          background-size: 86px auto;
        }
      }
    }
    .index-box-body {
      position: relative;
      padding: 25px;
      &.no-padding {
        padding: 0;
      }
      .fttj {
        background-image: url('./../../assets/images/index-icon05.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 10px 0;
        align-items: center;
        justify-content: space-between;
        position: relative;
        .fttj-item {
          text-align: center;
          flex-basis: 40%;
          .num {
            color: #fff;
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 6px;
          }
          .desc {
            color: $subtext;
            font-size: 14px;
          }
        }
        .total {
          position: absolute;
          right: 20px;
          top: 50%;
          left: 50%;
          width: 100px;
          height: 100px;
          margin-top: -50px;
          margin-left: -50px;
          padding: 12px 0;
          border: 1px #2fb0ff dashed;
          border-radius: 50%;
          text-align: center;
          .num {
            font-size: 40px;
            font-weight: bold;
            text-shadow: 0px 0px 30px #00f2ff;
          }
          .desc {
            color: $subtext;
            font-size: 14px;
          }
        }
      }
      .total {
        position: absolute;
        right: 20px;
        top: 0;
        color: #b6e6ff;
        b {
          margin-left: 5px;
          color: rgba(
            $color: (
              #fff
            ),
            $alpha: 1
          );
          text-shadow: 0px 0px 30px #00f2ff;
          font-size: 20px;
        }
      }
      .progress-box {
        position: relative;
        margin-top: 60px;
        .progree-text {
          position: absolute;
          left: 20px;
          top: 20px;
          right: 20px;
          text-align: center;
          padding: 10px 0;
          color: rgba(#fff, 0.6);
          .num {
            font-size: 16px;
            font-weight: 700;
            margin-top: 5px;
            color: rgba(#fff, 1);
          }
        }
      }
    }
  }
  .chart-wrapper {
    .pie-title {
      position: absolute;
      right: 10%;
      top: 10%;
      bottom: 20%;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-direction: column;
      .pie-title-item {
        position: relative;
        line-height: 40px;
        color: #b6e6ff;
        padding-left: 16px;
        &::before {
          content: '';
          width: 8px;
          height: 8px;
          position: absolute;
          top: 20px;
          left: 0;
          border-radius: 50%;
        }
        &:nth-child(1)::before {
          background-color: #288aef;
        }
        &:nth-child(2)::before {
          background-color: #25c374;
        }
        &:nth-child(3)::before {
          background-color: #ebbc39;
        }
        .label {
          font-size: 14px;
        }
        .num {
          font-size: 20px;
          text-shadow: 0px 0px 20px #00f2ff;
          margin-left: 10px;
        }
      }
    }
    .yygd-item {
      padding: 20px 0;
      &:first-child {
        margin-top: 10px;
      }
      .name {
        width: 80px;
        text-align: right;
        font-size: 18px;
        color: #b6e6ff;
      }
      .flex-box {
        margin: 0 10px;
      }
      .num {
        font-size: 18px;
        color: #fff;
        text-shadow: 0px 0px 20px #00f2ff;
        min-width: 100px;
      }
      .el-progress-bar {
        padding-right: 0;
      }
      .el-progress-bar__outer {
        background-color: #2b4978;
      }
      .el-progress__text {
        display: none;
      }
    }
    .fyfb {
      position: absolute;
      bottom: 20px;
      left: 20px;
      right: 20px;
      .fyfb-item {
        text-align: center;
        .num {
          font-size: 24px;
          text-shadow: 0px 0px 20px #00f2ff;
          background-image: url('./../../assets/images/index-icon06.png');
          background-size: contain;
          background-position: center center;
          background-repeat: no-repeat;
          height: 50px;
          line-height: 50px;
          color: #fff;
        }
        .name {
          font-size: 14px;
          color: #b6e6ff;
        }
      }
    }
  }
}
@media screen and (max-width: 1200px) {
}
</style>
